<template>
  <div class="app-container">
    <div class="tab-container">
      <ul>
        <li  @click="tab=0" :class="{tab_active:tab===0}">Dayjs</li>
        <li  @click="tab=1" :class="{tab_active:tab===1}">Upload</li>
        <li  @click="tab=2" :class="{tab_active:tab===2}">KLineChart</li>
        <li  @click="tab=3" :class="{tab_active:tab===3}">Echarts</li>
      </ul>
    </div>

    <div class="tab_content" v-if="tab===0">
      <DayjsDemo/>
    </div>
    <div class="tab_content" v-else-if="tab===1">
      <UploadDemo/>
    </div>
    <div class="tab_content" v-else-if="tab===2">
      <KLineChartDemo/>
    </div>
    <div class="tab_content" v-else-if="tab===3">
      <EchartsDemo/>
    </div>
  </div>
</template>

<script>
import DayjsDemo from '@/views/eye/study/DayjsDemo.vue'
import UploadDemo from '@/views/eye/study/UploadDemo.vue'
import KLineChartDemo from '@/views/eye/study/KLineChartDemo.vue'
import EchartsDemo from '@/views/eye/study/EchartsDemo.vue'

import '@/assets/font/index.css'

export default {
  name: 'Study',
  data() {
    return {
      tab: 0
    }
  },
  components: { DayjsDemo, UploadDemo,KLineChartDemo,EchartsDemo },
  created() {
  },
  methods: {}
}
</script>

<style>
.tab-container {
  width: 100%;
  border: 1px solid red;
}

.tab-container ul {
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #5A5D6627;
  margin: auto;
}

.tab-container ul li {
  list-style-type: none;
  padding: 10px;
  cursor: pointer;
  border: 1px solid red;
}

/*使用伪类插入符号*/
.tab-container ul li:before {
  content: "\e6ca";
  font-size: 16px;
  color: rgba(245, 0, 0, 0.76);
  padding-right: 2px;
  font-family: 'iconfont', serif !important;
  font-style: normal;
}

.tab_active {
  background-color: #409eff61;
}
</style>
